<template>
 <header :class="['home-header', 'wrap', { 'header-active': headerActive }]">
    <i class="iconfont icon-caidan"></i>
    <div class="header-search">
        <span class="app-name">G</span>
        <i class="iconfont icon-search"></i>
        <span class="search-title">家电返场同价11.11</span>
    </div>
    <router-link to="/login" tag="span" v-if="!isLogin">登录</router-link>
    <router-link tag="span" to="./user" v-else>
        <i class="iconfont icon-iconyonghu"></i>
    </router-link>
</header>
</template>

<script>

import {getUserInfo} from '../../../api'
    export default {
        data(){
            return {
              headerActive: false,
              isLogin:false
           }
        },
        created(){
                console.log('this.$store',this.$store.state);
        },
        beforeCreate(){
                getUserInfo(res=> {
                    console.log(res);
                    // console.log('isLoginBefore',this.isLogin);
                    // res.status == 0 ? this.isLogin = true : this.isLogin = false
                    // res.message.length < 3? this.isLogin = true : this.isLogin = false
                    this.isLogin =this.$store.getters.getIsLogin 
                    // console.log('isLoginAfter',this.isLogin);
                })
        },
        mounted() {
            // 添加滚动事件
            // console.log('执行了滚动事件');
            window.addEventListener('scroll', this.pageScroll)
        },
        methods: {
          
            
            
            pageScroll() {
            // 获取滚动距离
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            scrollTop > 100 ? this.headerActive = true : this.headerActive = false
            // console.log('执行了pageScroll方法');
            // console.log('headerActive:',this.headerActive);
            },
            // home.vue组件中
            beforeCreate() {
                getUserInfo().then(res => {
                    res.status == 0 ? this.isLogin = true : this.isLogin = false
                })
            }
        }
    }
    
</script>


<style lang="scss" scoped>
 @import '../../../components/style/mixin.scss';
 .header-active {
  background: $red;
}
.home-header {
    position: fixed;
    left: 0;
    top: 0;
    @include fj;
    width: 100%;
    height: 100px;
    line-height: 100px;
    padding: 0 30px;
    @include boxSizing;
    font-size: 30px;
    color: #fff;
    z-index: 10000;
    // background: $red;

    .icon-caidan {
        font-size: 50px;
    }

    .header-search {
        display: flex;
        width: 74%;
        height: 40px;
        line-height: 40px;
        margin: 20px 0;
        padding: 10px 0;
        color: #232326;
        background: #fff;
        @include borderRadius(40px);

        .app-name {
            padding: 0 20px;
            color: $red;
            font-size: 40px;
            font-weight: bold;
            border-right: 1px solid #666;
        }

        .icon-search {
            padding: 0 20px;
            font-size: 34px;
        }

        .search-title {
            font-size: 24px;
            color: #666;
        }
    }

    .icon-iconyonghu {
        font-size: 44px;
    }
}
</style>